<template>
  <el-dialog
    :visible="visible"
    :title="title"
    class="add-user-dialog"
    align-center
    :append-to-body="true"
    @opened="handleDialogOpen"
    @close="closeDialog"
  >
    <el-form
      :model="userForm"
      :rules="userRules"
      ref="userFormRef"
      label-width="100px"
    >
      <el-form-item label="登录名">
        <el-input v-model="userForm.loginName" :disabled="true" />
      </el-form-item>
      <el-form-item label="用户名称">
        <el-input v-model="userForm.userName" :disabled="true" />
      </el-form-item>
      <el-form-item label="用户角色">
        <el-select
          :disabled="true"
          v-model="userForm.roleId"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="(item, index) in userRoleDict"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="新密码" prop="loginPassword">
        <el-input
          v-model="userForm.loginPassword"
          type="password"
          show-password
        />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="userForm.confirmPassword"
          type="password"
          show-password
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="onSubmit"> 确定 </el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { PropType } from 'vue'
import { changeUserPassword } from '@/api/back-management/user'
import type { updateUserParams } from '@/api/back-management/user/interface'
import type { OptionData } from '@/utils/type'
import { Message as ElMessage } from 'element-ui'
import { Base64 } from 'js-base64'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  userInfo: {
    type: Object,
    default: () => {},
  },
  userRoleDict: {
    type: Array as PropType<OptionData[]>,
    default: () => [],
  },
})

const title = ref('修改密码')

const emit = defineEmits(['closeDialog', 'updateUser'])

const closeDialog = () => {
  emit('closeDialog')
}

const userForm = reactive<updateUserParams>({
  userName: '',
  loginName: '',
  roleId: '',
  loginPassword: '',
  confirmPassword: '',
  pkid: '',
})

const userFormRef = ref()

const equalToPassword = (rule: any, value: any, callback: any) => {
  if (userForm.loginPassword !== value) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const userRules = reactive({
  loginPassword: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
  ],
  confirmPassword: [
    { required: true, trigger: 'blur', message: '请再次输入您的密码' },
    { required: true, validator: equalToPassword, trigger: 'blur' },
  ],
})

const onSubmit = () => {
  userFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      if (userForm.pkid) {
        const params = {
          userId: userForm.pkid,
          password: Base64.encode(userForm.loginPassword!),
          type: '0',
        }
        changeUserPassword(params as updateUserParams)
          .then((res) => {
            if (res.success) {
              ElMessage.success('修改成功')
              emit('updateUser')
            } else {
              ElMessage.error(res.message)
            }
          })
          .catch((e) => {
            ElMessage.error(e)
          })
      } else {
        console.log(userForm)
      }
    }
  })
}
const handleDialogOpen = () => {
  if (props.userInfo) {
    const { userName, loginName, roleId, pkid } = props.userInfo
    userForm.userName = userName
    userForm.loginName = loginName
    userForm.roleId = roleId
    userForm.pkid = pkid
    userFormRef.value?.resetFields()
  }
}
</script>

<style lang="scss">
.add-user-dialog {
  //width: 662px;
  //height: 503px;
  //background: #ffffff;
  border-radius: 4px;

  .el-dialog__header {
    border-bottom: 1px solid #e5e5e5;

    .el-dialog__title {
      width: 64px;
      height: 16px;
      font-size: 16px;
      font-weight: bold;
      color: #27475f;
    }
  }

  .el-form {
    .el-form-item {
      min-height: 42px;
      margin-bottom: 21px;
      align-items: center;
    }

    .el-cascader {
      width: 100%;
    }

    .el-select {
      width: 100%;
    }
  }

  .dialog-footer {
    width: 100%;
    height: 100%;
    text-align: center;
  }
}
</style>
